<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户和书籍信息</title>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }

        th, td {
            padding: 8px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }


    </style>
</head>
<body>
<div id="app">
    <h1>用户信息</h1>

    <button @click="displayUsers">显示所有用户</button>
    <button @click="displayNormalUsers">显示普通用户</button>
    <button @click="displayBookManagers">显示图书管理员</button>
    <button @click="displayManagers">显示顶级管理员</button>
    <button @click="showAddUserModal">添加用户</button>


    <table>
        <tr>
            <th>用户名</th>
            <th>电话号码</th>
            <th>年龄</th>
            <th>性别</th>
            <th>身份</th>
            <th>操作</th>
        </tr>
        <tr v-for="user in users" :key="user.username">
            <td>{{ user.username }}</td>
            <td>{{ user.phone }}</td>
            <td>{{ user.age }}</td>
            <td>{{ user.gender === 0 ? '女' : '男' }}</td>

            <td>{{ user.userPermission == 0 ? "普通用户" : (user.userPermission == 1 ? "图书管理者" : "经理") }}</td>
            <td>
                <button @click="deleteUser(user)">删除</button>
                <button @click="startEditing(user)">修改</button>
            </td>
        </tr>
    </table>

    <!-- 编辑模态框 -->
    <div v-if="editingUser" class="modal">
        <div class="modal-content">
            <h2>编辑用户信息</h2>
            <table>
                <tr>
                    <td>用户名</td>
                    <td><input v-model="tempUser.username" type="text"></td>
                </tr>
                <tr>
                    <td>电话号码</td>
                    <td><input v-model="tempUser.phone" type="text"></td>
                </tr>
                <tr>
                    <td>年龄</td>
                    <td><input v-model="tempUser.age" type="text"></td>
                </tr>
                <tr>
                    <td>性别</td>
                    <td>
                        <select v-model="tempUser.gender">
                            <option value="0">女</option>
                            <option value="1">男</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>用户权限</td>
                    <td>
                        <select v-model="tempUser.userPermission">
                            <option value="0"> 普通用户</option>
                            <option value="1"> 图书管理者</option>
                            <option value="2"> 顶层管理</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" align="center">
                        <button @click="saveUserChanges">保存</button>
                        <button @click="cancelEdit">取消</button>
                    </td>
                </tr>
            </table>
        </div>
    </div>

    <!-- 添加用户模态框 -->
    <div v-if="showAddUser" class="modal2">
        <div class="modal-content">
            <h2>添加用户</h2>
            <table>
                <tr>
                    <td>用户名</td>
                    <td><input v-model="newUser.username" type="text"></td>
                </tr>
                <tr>
                    <td>密码</td>
                    <td><input v-model="newUser.password" type="text"></td>
                </tr>
                <tr>
                    <td>电话号码</td>
                    <td><input v-model="newUser.phone" type="text"></td>
                </tr>
                <tr>
                    <td>年龄</td>
                    <td><input v-model="newUser.age" type="text"></td>
                </tr>
                <tr>
                    <td>性别</td>
                    <td>
                        <select v-model="newUser.gender">
                            <option value="0">女</option>
                            <option value="1">男</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>用户权限</td>
                    <td>
                        <select v-model="newUser.userPermission">
                            <option value="0"> 普通用户</option>
                            <option value="1"> 图书管理者</option>
                            <option value="2"> 顶层管理</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" align="center">
                        <button @click="addUser">添加</button>
                        <button @click="cancelAddUser">取消</button>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
    .modal,.modal2{
        display: none;
        position: fixed;
        z-index: 1;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0, 0, 0, 0.5);
    }

    .modal-content,.modal2 .modal-content {
        background-color: #fefefe;
        margin:  auto;
        padding: 20px;
        border: 1px solid #888;
        width: 50%;
    }
</style>

<script>
    new Vue({
        el: '#app',
        data: {
            users: [],
            editingUser: null,
            tempUser: null,
            showAddUser: false, // 控制添加用户模态框的显示与隐藏
            newUser: {
                username: '',
                phone: '',
                age: '',
                gender: '',
                userPermission: ""
            }
        },
        methods: {
            displayUsers() {
                $.ajax({
                    url: "/user/getAllUsers",
                    type: "GET",
                    async: true,
                    success: (data) => {
                        this.users = data;
                    }
                });
            },
            displayNormalUsers() {
                $.ajax({
                    url: "/user/getNormalUsers",
                    type: "GET",
                    async: true,
                    success: (data) => {
                        this.users = data;
                    }
                });
            },
            displayBookManagers() {
                $.ajax({
                    url: "/user/getBookManagers",
                    type: "GET",
                    success: (data) => {
                        this.users = data;
                    }
                });
            },
            displayManagers() {
                $.ajax({
                    url: "/user/getAllManagers",
                    type: "GET",
                    success: (data) => {
                        this.users = data;
                    }
                });
            },
            deleteUser(user) {
                if (confirm("确定要删除该用户吗？")) {
                    $.ajax({
                        url: "/user/deleteUser",
                        type: "delete",
                        data: JSON.stringify(user),
                        dataType: "JSON",
                        contentType: "application/json;charset/utf-8",
                        success: (json) => {
                            if(json.state == 5000){
                                alert("谁人胆敢以下犯上！");
                            }else if(json.state==6000){
                                alert(json.message)
                            } else{

                                console.log(json);
                                console.log(JSON.stringify(this.user));
                                const index = this.users.indexOf(user);
                                if (index !== -1) {
                                    this.users.splice(index, 1);
                                }
                            }
                        }
                    });
                }
            },
            showAddUserModal() {
                this.showAddUser = true; // 显示添加用户模态框
                this.$nextTick(() => {
                    const modal = document.querySelector('.modal2');
                    modal.style.display = 'flex';
                });
            },
            addUser() {
                // 发送添加用户的 AJAX 请求
                $.ajax({
                    url: "/user/addUser",
                    type: "POST",
                    data: JSON.stringify(this.newUser),
                    dataType: "JSON",
                    contentType: "application/json;charset/utf-8",
                    success: (json) => {
                        console.log(json);
                        alert(JSON.stringify(this.newUser))
                        // 将新添加的用户添加到用户列表
                        this.users.push(this.newUser);
                        // 重置表单和模态框状态
                        this.newUser = {
                            username: '',
                            phone: '',
                            age: '',
                            gender: ''
                        };
                        this.showAddUser = false;
                    }
                });


            },
            cancelAddUser() {
                // 取消添加用户，重置表单和模态框状态
                this.newUser = {
                    username: '',
                    phone: '',
                    age: '',
                    gender: ''
                };
                this.showAddUser = false;

                this.$nextTick(() => {
                    const modal = document.querySelector('.modal2');
                    modal.style.display = 'none';
                });



            },

            startEditing(user) {
                this.tempUser = JSON.parse(JSON.stringify(user));
                this.editingUser = user;
                this.showModal();
            },
            saveUserChanges() {
                // 发送更新用户信息的AJAX请求
                $.ajax({
                    url: "/user/updateUser",
                    type: "PUT",
                    data: JSON.stringify(this.tempUser),
                    dataType: "JSON",
                    contentType: "application/json;charset/utf-8",
                    success: (json) => {
                        console.log(json);

                        // 更新用户列表中对应的用户信息
                        const index = this.users.findIndex((u) => u.username === this.editingUser.username);
                        if (index !== -1) {
                            this.users.splice(index, 1, this.tempUser);
                        }

                        // 清空编辑状态
                        this.editingUser = null;
                        this.tempUser = null;
                        this.hideModal();
                    }
                });
            },
            cancelEdit() {
                this.editingUser = null;
                this.tempUser = null;
                this.hideModal();
            },
            showModal() {
                this.$nextTick(() => {
                    const modal = document.querySelector('.modal');
                    modal.style.display = 'flex';
                });
            },
            hideModal() {
                this.$nextTick(() => {
                    const modal = document.querySelector('.modal');
                    modal.style.display = 'none';
                });
            }
        },
        mounted() {
            this.displayUsers();
        }
    });
</script>

</body>
</html>
